<template>
  <div class="login">
    <van-nav-bar title="登录页" left-arrow @click-left="onClickLeft">
    </van-nav-bar>
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field
          v-model="userInfo.phone"
          :rules="[
            {
              required: true,
              trigger: 'onBlur',
              pattern: /^1[3-9]\d{9}$/,
              message: '请输入正确的手机号',
            },
          ]"
          label="手机号"
          placeholder="请输入手机号码"
        />
        <van-field
          v-model="userInfo.pwd"
          :rules="[
            {
              required: true,
              trigger: 'onBlur',
              message: '请输入密码',
            },
          ]"
          label="密码"
          type="password"
          placeholder="请输入密码"
        />
      </van-cell-group>

      <div class="code">
        <van-field
          :rules="[
            {
              required: true,
              trigger: 'onBlur',
              message: '请输入验证码',
            },
          ]"
          center
          clearable
          label="验证码"
          placeholder="请输入验证码"
          v-model="verify"
        >
          <template #button>
            <vueImgVerify ref="verifyRef" />
          </template>
        </van-field>
        <!-- <span style="margin: 20px">点击更换验证码</span> -->
      </div>

      <div class="m-t-10 p-l-30 p-r-30 p-t-30">
        <van-button round type="danger" block native-type="submit"
          >登录</van-button
        >
      </div>
    </van-form>
    <div class="m-t-10 text-center p-30">
      <router-link to="/register"
        ><span style="font-size: 2.4rem"
          >没有账号？点击去注册</span
        ></router-link
      >
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import { useRouter, useRoute } from "vue-router";

import { useStore } from "vuex";
import { userGet } from "../api/user";
import vueImgVerify from "../components/Code.vue"; // 引入的子组件
import { Notify, Toast } from "vant";
import "vant/es/notify/style";
import "vant/es/toast/style";

let route = useRoute();
let router = useRouter();
let store = useStore();

// 验证码
let verifyRef = ref(null);
let verify = ref();

let userInfo = reactive({
  pwd: "",
  phone: "",
});
let onClickLeft = () => {
  router.push("/category");
};
let onSubmit = () => {
  userGet(userInfo).then((res) => {
    console.log(res);
    let { code, data } = res.data;
    let message = res.data.msg;
    if (code == 110) {
      Notify({
        message,
        type: "warning",
      });
    }
    if (code == 112) {
      Notify({
        message,
        type: "danger",
      });
    }
    if (code == 111 && verifyRef.value.imgCode === verify.value) {
      Toast({
        message,
        icon: "success",
      });
      store.commit("user/userInfoMut", data); //如果点击登录后发get请求返回的数据里面有用户信息，那么就存入状态机和本地存储
      localStorage.setItem("userInfo", JSON.stringify(data));
      let { target } = route.query;
      if (target == "/detail") {
        //从详情页到登录页，没有经过notlogin页直接back
        router.back();
      } else {
        //从购物车页到notlogin页push到cart页
        router.push("/cart");
      }
    } else if (verifyRef.value.imgCode != verify.value) {
      Toast.fail("验证码输入错误");
    }
  });
};
</script>

<style lang="less" scoped>
:deep(.van-nav-bar .van-icon),
:deep(.van-nav-bar__title) {
  color: #a36663;
}
:deep(.van-nav-bar__content) {
  background-color: transparent;
}
:deep(.van-nav-bar__text) {
  color: #a36663;
}
a {
  color: #a36663;
}
:deep(.van-button--danger) {
  //登录按钮
  background: #a36663;
  border-color: #a36663;
}
.login {
  background-image: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.17sucai.com%2Fupload%2F55%2F2013-05-19%2F4b9180ad9c55d749666ee7bbca482ab0.png%3Fx-oss-process%3Dstyle%2Fpri&refer=http%3A%2F%2Fimg.17sucai.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664030649&t=2ce041f4915a62ba9d4e13bb06895a9a);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 100vh;
}
.van-nav-bar,
:deep(.van-cell-group),
:deep(.van-cell) {
  background-color: transparent;
}
</style>
